<template>
  <div>
    <el-dialog
      :title="form.id ? '分类编辑' : '分类添加'"
      :visible.sync="buffer.isShow"
    >
      <el-form :model="form">
        {{ form }}
        
        <!-- 规格名称 -->
        <el-form-item label="规格名称" :label-width="formLabelWidth">
          <el-input v-model="form.specsname" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 规格属性值 添加和删除元素 -->
        <el-form-item 
            label="规格属性值" 
            :label-width="formLabelWidth"
            v-for="(item,index) in attrs"
            :key="index"
        >
            <div class="row">
                <!-- 给input绑定每个{value} -->
                <el-input v-model="item.value" autocomplete="off"></el-input>
                <el-button type="primary" @click="addAttrs" v-if="index ==0">新增属性值</el-button>
                <el-button type="primary" @click="removeAttrs(index)" v-else>删除属性值</el-button>
            </div>
        </el-form-item>

      
        <!-- 规格状态 -->
        <el-form-item label="规格状态" :label-width="formLabelWidth">
          <el-switch
            v-model="form.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="buffer.isShow = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["buffer"],
  watch: {
    buffer: {
      handler(newV, oldV) {
        //2.7赋空表单数据
        if (!newV.isShow) {
            //监听窗口关闭
            this.form = {
                specsname: '',//商品规格名称
                attrs: '',//规格值
                status: 1,//规格状态 1 2
            };
            // 赋空规格值1.6
            this.attrs = [{value:""}]
        }
      },
      deep: true,
    },
  },
  data() {
    return {
        form: {
            specsname: '',//商品规格名称
            attrs: '',//规格值
            status: 1,//规格状态 1 2
        },

        formLabelWidth: "120px",
        attrs:[{value:""}]
    };
  },
  methods: {
    //1.提交新增菜单数据
    submit() {
        // 1.1组装属性值
        this.form.attrs = this.attrs.map(item=>item.value).join(',');
        //1.2执行提交操作
        (this.form.id
        ? this.$api.reqSpecsEdit(this.form)
        : this.$api.reqSpecsAdd(this.form)
        )
        .then((res) => {
            //1.3关闭弹窗
            this.buffer.isShow = false;
            //1.4提示用户操作成功
            this.$notify({
            title: "成功",
            message: "操作成功",
            type: "success",
            });
            //1.5更新菜单列表数据
            //子传父通过
            //this.$emit ('父亲传递的自定义事件名字','传递的数据')
            this.$emit("channel", "ok");
            //1.6赋空表单
        })
        .catch((err) => console.log(err));
    },
    //2.新增属性值
    addAttrs(){
        //追加新对象{value:""}
        this.attrs.push({value:""})
    },
    //3.删除属性值
    removeAttrs(index){
        //根据数据的下标删除元素
        this.attrs.splice(index,1)
    }
    
  },
};

</script>

<style  scoped>

   .row{
        display: flex;
    }
</style>
